import { useId } from 'react'

export default function TestHook () {
  // const [list] = useState(['a', 'b', 'c', 'd'])
  const useNameId = useId()
  console.log('---useNameId---', useNameId)
  const passwordId = useId()
  console.log('---passwordId---', passwordId)
  return (
    <div>
      {
        // list && list.map((item) => {
        //   const id = useId() // 这样的写法是错误的
        //   return (
        //     <p key = { id }> { item } </p>
        //   )
        // })
      }
      {/* HTML 中使用for，react中使用HtmlFor */}
      <div>
        <label htmlFor={useNameId}>用户名</label>
        <input type='text' id={useNameId} />
      </div>
      <div>
        <label htmlFor={passwordId}>密码</label>
        <input type='password' id={passwordId} />
      </div>
    </div>
  )
}
